<template>
    <n-card title="最新排名" style="width: 300px;">
    <template #header-extra><n-button text type="info" @click="link2rank">更多>></n-button></template>
        <n-space vertical v-for="item in users.top3" :key="item.index">
        <n-space align="center" justify="space-between">
            <n-button text size="large">
                <n-icon :color="item.color"><Medal /></n-icon>
                <n-ellipsis style="max-width: 100px;">
                    {{ item.name }}
                </n-ellipsis>
            </n-button>
            <n-space>
                已完成{{ item.solved }}题
            </n-space>
        </n-space>
        </n-space>
        <n-space vertical v-for="item in users.others" :key="item.index" justify="space-between">
        <n-space align="center" justify="space-between">
            <n-button text size="large">
                {{ item.name }} &nbsp;
            </n-button>
            <n-space>
                已完成{{ item.solved }}题
            </n-space>
        </n-space>
        </n-space>
    </n-card>
</template>

<script lang="ts">
import { Medal } from "@vicons/ionicons5";
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
    components: { Medal },
    setup(){
        return {
            users: {
                top3: [
                    {index: 0, name: 'Alice', solved: 340, color: 'gold'},
                    {index: 1, name: 'Bob', solved: 318, color: 'silver'},
                    {index: 2, name: 'Charles', solved: 288, color: 'copper'}
                ],
                others: [
                    {index: 3, name: '张三', solved: 256},
                    {index: 4, name: '李四', solved: 220}
                ]
            }
        }
    },
    data(){
        return {

        }
    },
    methods: {
        link2rank(){
            this.$router.push('/rank');
        },
    }
})
</script>